<template>
	<div class="star">
		<span v-bind:class="star" v-for ="star in stars"></span>
	</div>
</template>
<script >
	export default {
	  name:'star',
	  props:['num'],
  	computed:{
  	stars:function(){
     var s = [];
     var star_on = parseInt(this.num/10)
     var star_half = this.num-parseInt((this.num/10))*10
     	for(var i=0; i<star_on;i++){
	     	s.push("on")
	    	 }
	     if (star_half!==0) {
	     	s.push("half")
	     }
	     while(s.length<5){
	     	s.push("off")
	     }
	     return s;
	  	}
	  }
	}
</script>
<style scoped>
	.star span{
		display: inline-block;
		width: 14px;
		height: 14px;
		background-repeat: no-repeat; 
		background-size: 10px 10px;
	}
	.star .on{
		background-image: url('../assets/star24_on@2x.png');
	}
	.star .off{
		background-image: url('../assets/star36_off@2x.png');
	}
	.star .half{
		background-image: url('../assets/star24_half@2x.png');
	}
</style>